<template>
    <div>
        <!-- 粘性布局 -->
        <van-sticky>
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </van-sticky>
        <!-- nav布局 -->
        <nav>
            <van-grid :column-num="5">
                <van-grid-item :icon="item.icon" :text="item.text" v-for="item in grid" :key="item" />
            </van-grid>
        </nav>
        <!-- 卡片封装 -->
        <div v-for="item in cards" :key="item" class="big">
            <card :item=item></card>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import card from '../../components/card.vue'
let grid = ref([
    { icon: 'friends-o', text: '女装' },
    { icon: 'fire-o', text: '女鞋' },
    { icon: 'gem-o', text: '上衣' },
    { icon: 'cart-o', text: '美妆/护肤' },
    { icon: 'service-o', text: '裤子' },
    { icon: 'bag-o', text: '母婴/童装' },
    { icon: 'music-o', text: '裙子' },
    { icon: 'cluster-o', text: '男装/男鞋' },
    { icon: 'desktop-o', text: '套装' },
    { icon: 'flower-o', text: '配饰' },
])
const cards = ref([
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', ms: '[玉琪yuki]法式富家千金', jg: '148.8', xl: '销量970' },
    { img: 'https://pic.616pic.com/bg_w1180/00/06/72/8mBRMZjWmw.jpg!/fw/1120', ms: '[玉琪yuki]法式富家千金', jg: '148.8', xl: '销量24' },
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', ms: '[玉琪yuki]法式富家千金', jg: '148.8', xl: '销量30' },
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg', ms: '[玉琪yuki]法式富家千金', jg: '148.8', xl: '销量97' },
])


</script>

<style scoped>
.big{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}
.big > div{
    width: 40%;
    padding: 6px; 
    margin: 2px 0 0 2px;
}
</style>